<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<title>metro-zTree</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/Terminator/css/bootstrap.css"
		type="text/css" />
<link rel="stylesheet" href="/Terminator/css/demo.css" type="text/css" />
<link rel="stylesheet" href="/Terminator/css/zTreeStyle.css"
	type="text/css" />
<script type="text/javascript" src="/Terminator/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript"
	src="/Terminator/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
	src="/Terminator/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript"
	src="/Terminator/js/jquery.ztree.exedit-3.5.js"></script>

<SCRIPT type="text/javascript">
	var setting = {
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			onClick : zTreeOnClick
		}
	};

	var zNodes = [ {
		id : 1,
		pId : 0,
		name : "展开、折叠 自定义图标不同",
		open : true,
		iconOpen : "/Terminator/image/1_open.png",
		iconClose : "/Terminator/image/1_close.png"
	}, {
		id : 20,
		pId : 1,
		name : "叶子节点1",
		icon : "/Terminator/image/2.png"
	}, {
		id : 65,
		pId : 1,
		name : "叶子节点2",
		icon : "/Terminator/image/3.png"
	}, {
		id : 13,
		pId : 1,
		name : "叶子节点3",
		icon : "/Terminator/image/5.png"
	}, {
		id : 2,
		pId : 0,
		name : "展开、折叠 自定义图标相同",
		open : true,
		icon : "/Terminator/image/4.png"
	}, {
		id : 21,
		pId : 2,
		name : "叶子节点1",
		icon : "/Terminator/image/6.png"
	}, {
		id : 22,
		pId : 2,
		name : "叶子节点2",
		icon : "/Terminator/image/7.png"
	}, {
		id : 23,
		pId : 2,
		name : "叶子节点3",
		icon : "/Terminator/image/8.png"
	}, {
		id : 3,
		pId : 0,
		name : "不使用自定义图标",
		open : true
	}, {
		id : 31,
		pId : 3,
		name : "叶子节点1"
	}, {
		id : 32,
		pId : 3,
		name : "叶子节点2"
	}, {
		id : 33,
		pId : 3,
		name : "叶子节点3"
	}

	];

	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		$("#abc").click(function() {
			document.getElementById("aa").style.display = "block";
		})
	});
	function zTreeOnClick(event, treeId, treeNode) {
		document.getElementById("aa").style.display = "none";
		$("#abc").val(treeNode.name);
	};
</SCRIPT>
</HEAD>

<BODY>
	<div class="" id=''>我在下面 上的发生大幅 上的发生大幅随碟附送的</div>
	<input id='abc' type="text" readonly="readonly" />
	<div
		style="left: 258.617px; position: fixed; z-index: 100; display: none;"
		class="" id="aa">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	<div class="">我在下面 上的发生大幅 上的发生大幅随碟附送的</div>
	<div class="">我在下面 上的发生大幅 上的发生大幅随碟附送的</div>
</BODY>
</HTML>